<template>
    <div class="ft">

        <div id="xi">
        <mt-header title="修改收货地址" class="inmoder" fixed id="po">
          <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
          <mt-button slot="right" id="ei">删除</mt-button>
        </mt-header>
        </div>

        <div id="app" class="ht">
          <mt-field  type="text" placeholder="您的名字" label="收件人"  disableClear v-model="name" :state="nameState" @blur.native.capture="checkName"></mt-field>
          <mt-field  type="text" placeholder="配送员联系您的手机号" label="手机号"   disableClear :attr="{maxlength:'11'}" style="border-bottom:1px solid #d9d9d9" v-model="phone" :state="phoneState" @blur.native.capture="checkphone"></mt-field>
          <mt-field  type="text" placeholder="小区/大厦/学校" label="收货地址"  disableClear v-model="address" :state="addressState" @blur.native.capture="checkAddress"></mt-field>
          <mt-field  type="text" placeholder="门牌号等(例如: 10栋1001号)" label="用户名:" disableClear v-model="number" :state="numberState" @blur.native.capture="checkNumber"></mt-field>
        </div>
            <mt-button type="primary" size="large" style="margin-top:40px" @click="samForm" id="btn">保存</mt-button>
        </div>
</template>

<script>

export default {
  data() {
    return {
        name: '',
      nameState:'',
      phone:'',
      phoneState:'',
      address:'',
      addressState:'',
      number:'',
      numberState:''
    }
  },
   mounted(){
        let aid=this.$route.query.aid
        console.log(aid);
        //加载当前id的详情信息
      
    },
   
  methods: {
    checkName(){
        let reg =/^[\u4e00-\u9fa5_a-zA-Z0-9]{2,40}$/;
        if(reg.test(this.name)){
          this.nameState = 'success'
          return true
        }else{
          this.nameState = 'error'
          return false
        }
        
      },
       checkphone(){
        let reg = /^1[3-9]\d{9}$/;
        if(reg.test(this.phone)){
          this.phoneState = 'success'
          return true
        }else{
          this.phoneState = 'error'
          return false
        }
      },
      checkAddress(){
        let reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,40}$/;
        if(reg.test(this.address)){
          this.addressState = 'success'
          return true
        }else{
          this.addressState = 'error'
          return false
        }
      },
       checkNumber(){
        let reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,40}$/;
        if(reg.test(this.number)){
          this.numberState = 'success'
          return true
        }else{
          this.numberState = 'error'
          return false
        }
      },
       samForm() {
        if (this.checkName() &&
        this.checkAddress() &&
        this.checkphone() &&
        this.checkNumber()){
   console.log('注册成功');
      //
      // this.axios.post
      // ('/',
      //  `uid=1&name=${this.name}&phone=${this.phone}&regres=${this.address}&addres=${this.number}`)
       
        }
    
  }, 

}
}
</script>

<style scoped>
#ei{
    font-size: 4vw;
}
.pi{
              border: 0;
            border-bottom: 0 solid black;
            background: 0;
            outline: none;
}
    p{
        font-weight:bold;
    }
    .ft{
        height: 170vw;
        width: 100vw;
        background-color: rgb(242,242,242);
        
    }
    input{
        padding-left: 10vw;
        text-align: left;
    }
    .pu{
       padding-left: 6vw;
        text-align: left; 
    }
    #po{
       background-color: #fff;
       color: #000;
       font-size: 5vw;
       font-weight:bold;
    }
    #xi{
        margin-bottom: 13vw;
        display: flex;
    }
    .ht{
        text-align: left;
        background-color: #fff;
    }
    .yp{
        width: 90vw;
    }
</style>